<template>
  <div class="page">
    <!-- 搜索区域 开始 -->
    <div class="el_card_box">
      <el-form :inline="true" size="small" :model="formInline" class="search_form">
        <el-form-item label="医院名称：">
          <hospital-select v-model="formInline.hospitals" />
        </el-form-item>
        <el-form-item label="预约时间：">
          <el-date-picker v-model="formInline.orderTime" type="daterange" unlink-panels :picker-options="pickerOptions"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="formInline.ofbStatus" clearable>
            <el-option v-for="(item, index) in HOSPITALFEEDBACKSTATUS" :key="index" :label="item.name"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="关键词：">
          <el-input v-model="formInline.term" placeholder="请输入客户姓名/电话" @keyup.enter.native="getList(1)" />
        </el-form-item>
      </el-form>
      <div class="search_btn_box">
        <el-button type="primary" size="small" @click="onSearch">筛选</el-button>
        <el-button type="default" size="small" @click="rest">清空筛选</el-button>
      </div>
    </div>
    <!-- 搜索区域 end -->

    <!-- 表格 开始 -->
    <div class="table_box">
      <!-- 操作区域 开始 -->
      <div class="action_box">
        <el-button type="primary" size="small" @click="editEvent('wait')">待反馈录入</el-button>
        <el-button type="default" size="small" @click="editEvent('reback')">再到店客户录入</el-button>
        <el-button type="default" size="small" @click="editEvent('otherBack')">其他到店客户录入</el-button>
        <el-button type="default" size="small" @click="editEvent('refund')">退款录入</el-button>
      </div>
      <!-- 操作区域 end -->

      <el-table ref="elTable" class="el_table" size="small" :data="tableData">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column prop="channelName" label="客户信息" width="150px">
          <template slot-scope="{row}">
            <tab-user :user="userFormatter(row)" />
          </template>
        </el-table-column>
        <el-table-column prop="downloadCnt" label="客户需求">
          <template slot-scope="{row}">
            <div class="tag_list">
              <div v-for="(item, index) in (row.enrollProject ? row.enrollProject.split(',') : [])" :key="index"
                class="tag">
                {{ item }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="registerCnt" label="年龄" width="80">
          <template slot-scope="{row}">{{ row.age }}岁</template>
        </el-table-column>
        <el-table-column prop="cpa" label="信息收集">
          <template slot-scope="{row}">
            <el-tooltip class="item" effect="dark" placement="top-start">
              <div slot="content" style="max-width:240px">{{ row.collectInfo }}</div>
              <div class="tab_txt">{{ row.collectInfo }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="hospitalName" label="预约医院" show-overflow-tooltip width="160px" />
        <el-table-column prop="appointmentTime" label="预约时间" sortable="custom" show-overflow-tooltip width="120">
          <template slot-scope="{row}">{{ showTime(row.appointmentTime) }}</template>
        </el-table-column>
        <el-table-column prop="remark" label="预约备注">
          <template slot-scope="{row}">
            <el-tooltip class="item" effect="dark" placement="top-start">
              <div slot="content" style="max-width:240px">{{ row.remark }}</div>
              <div class="tab_txt">{{ row.remark }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="statusDesc" label="状态" show-overflow-tooltip>
          <template slot-scope="{row}">
            <el-tooltip v-if="(row.status == 7 || row.status == 6) && row.reason" class="item" effect="dark"
              placement="top-start">
              <div slot="content" style="max-width:240px">{{ row.reason }}</div>
              <div>
                {{ row.statusDesc }}
                <i class="el-icon-warning-outline" />
              </div>
            </el-tooltip>
            <span v-else>{{ row.statusDesc }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="240px" align="center" fixed="right">
          <template slot-scope="{row}">
            <!-- <auth-link type="primary" uid="1030501" @click="editEvent('',row.id)">更新反馈</auth-link> -->
            <el-link type="primary" @click="editEvent('add',row)">更新反馈</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination_list">
        <el-pagination background layout="sizes, total,prev, pager, next, jumper" :total="pageTotal"
          :page-size="pageSize" :page-sizes="pageSizes" :current-page.sync="pageNumber" @current-change="getList"
          @size-change="changePageSize" />
      </div>
    </div>
    <!-- 表格 end -->

    <!-- 更新反馈 开始 -->
    <update-feedback v-model="showDialog" :id="feedbackId" :classify="classify" @change="getList" v-if="showDialog"></update-feedback>
    <!-- 更新反馈 end -->

  </div>
</template>

<script>
import { GET_OFEEDBACK_SEARCH } from '@/http/book'
import { showToast, deepClone } from '@/common/util'
import moment from 'moment'
import { HOSPITALFEEDBACKSTATUS } from '@/common/constants'
import { systemToDoShortcuts } from '@/common/date'
import UpdateFeedback from './updateFeedback.vue'
export default {
  components: {
    UpdateFeedback
  },
  data() {
    return {
      formInline: {},
      tableData: [],
      pageTotal: 0,
      pageNumber: 1,
      pageSizes: [10, 20, 50, 100],
      pageSize: 20,
      eloading: false,
      showDialog: false,
      loading: false,
      bookDialog: false,
      pickerOptions: {
        shortcuts: systemToDoShortcuts
      },
      HOSPITALFEEDBACKSTATUS,
      feedbackId: '',
      classify:''
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    /** 重置 */
    rest() {
      this.formInline = {}
      this.getList()
    },

    /** 每页展示 */
    changePageSize(e) {
      this.pageSize = e
      this.getList()
    },

    /** 获取参数 */
    getParams() {
      const oParams = deepClone(this.formInline)
      const n = oParams.orderTime

      if (n && n.length > 0) {
        oParams.orderStartTime = n[0]
        oParams.orderEndTime = n[1]
      }

      delete oParams.orderTime

      oParams.pageNumber = this.pageNumber
      oParams.pageSize = this.pageSize
      return oParams
    },

    /** 获取列表 */
    getList() {
      const _this = this
      const oParams = this.getParams()
      GET_OFEEDBACK_SEARCH(oParams).then(res => {
        const obj = res.data || {}
        _this.tableData = obj.list || []
        _this.pageTotal = obj.totalElements
      })
    },

    // 格式化处理用户信息
    userFormatter(row) {
      const o = deepClone(row)
      o.customerName = o.name
      o.customerPhone = o.phone
      o.id = o.clueId
      return o
    },

    // 格式化展示时间
    showTime(str) {
      if (!str) {
        return ''
      }
      return moment(str).format('yyyy-MM-DD HH:mm')
    },

    // 更新反馈
    editEvent(type,row) {
      if (row && row.id) {
        this.feedbackId = row.id;
      } else {
        this.feedbackId = "";
      }
      this.classify = type
      this.showDialog = true;
    },

    // 搜索
    onSearch(){
      this.pageNumber = 1;
      this.getList()
    }


  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/customer/index.scss";
</style>
